<template>
  <div class="train">
    <div class="topbar">
      <ExamineTopBar/>
    </div>
    <div class="content">
      <div class="left_introduce">
        <div class="personal_informations">
          <div class="personal_informations_left">
            <div class="examine_name examine_map_name">
              <strong>地图：曲靖市辖区各乡镇行政规划边界图</strong>
            </div>
            <div class="name examine_name">
              <strong>考核题量 : </strong>
              {{examine_topics_list.length}}
            </div>
            <div class="name examine_name">
              <strong>考核时长 : </strong>
              {{examine_time}}分钟
            </div>
            <div class="name examine_name">
              <strong>总分数 : </strong>
              100
            </div>
          </div>
          <div class="personal_informations_right">
            <div class="examine_time">
              <div class="examine_time_tip">剩余时间</div>
              <div class="examine_time_count_button examine_time_count" id="examine_time_text_color"
                @click="start_examine"
              >
                {{examine_conutTime.hour}}:
                {{examine_conutTime.min}}:
                {{examine_conutTime.sec}}
              </div>
              <div class="button_tip">点击暂停/继续</div>
            </div>

            <div class="examine_grade">
              <div class="examine_time_tip">当前分数</div>
              <div class="examine_time_count">
                <i>{{examine_grade}}</i>
              </div>
            </div>
          </div>
        </div>




<!--        云南地图区域-->
        <div class="mall_map">
          <yunnanProvinceMap/>
        </div>
      </div>


      <div class="game_body">
          <!--    题目区域-->
          <div class="topic">
            题{{examine_topic_num}}:{{examine_topics_list[examine_topic_num-1].question}}
          </div>
          <ExamineMap />


<!--        确认答案区域-->
          <div class="answer_pop" v-if="answer_pop_status">
            <div class="answer_content" >
              <div class="answer_content_text" id="answer_content_text">{{answer_tip}}</div>
              <div class="answer_content_buttons">
                <div class="button_cancel" @click="answer_pop_cancel">取消</div>
                <div class="button_sure" @click="answer_pop_sure">确定</div>
              </div>
            </div>
          </div>

<!--        温馨提示区域-->
        <div class="tips">
         温馨提示：鼠标左键点击进入下一级地图，再次左键可返回；鼠标右键为选择当前区域作为选定的答案区域。
        </div>

<!--        倒计时暂停遮罩层-->
        <div class="countdown_Time_pause" v-if="status.countdown_Time_pause_status"></div>


      </div>



      <div class="right_introduce">
        <div class="county_introduction">


<!--          题目导航已淘汰-->
<!--          <div class="examine_right_top">-->
<!--            <div class="topic_nav">题目导航</div>-->
<!--            <div class="topic_nav_content">-->
<!--              <div class="topic_nav_strips" v-for="(item,index) in examine_topics_nav" :key="index">-->
<!--               <i>-->
<!--                  {{index+1}}.{{item}}-->
<!--               </i>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->



          <div class="record">
            <div class="record_name">答题记录</div>
            <div class="record_content">
              <div class="record_strips" id="record_strips" v-for="(item,index) in examine_answer_questions_list" :key="index">
                <i :class="getStatusClass(item.status)">
                  {{examine_answer_questions_list.length-index}}.问题：找寻{{item.question}}的行政规划区域；{{username}}选择：{{item.user_select}}；答题状态：{{item.status}}。
                </i>
              </div>
            </div>
          </div>

          <div class="true_map">
            <div class="true_map_title">位置解析-题{{ examine_topic_num > 1 ? examine_topic_num - 1 : '' }}</div>
            <div class="true_map_content">
              <div class="true_map_county_map">
                <county_Map/>
              </div>
              <div class="true_map_town_map">
                <town_Map/>
              </div>
            </div>
          </div>

        </div>
      </div>




    </div>


<!--    进入弹窗-->
    <div class="time_countdown_pop" v-if="status.time_countdown_pop">
      <div class="time_countdown_pop_content">
        <div class="time_countdown_pop_top">
          <div class="time_countdown_pop_top_tip">
            注意事项
          </div>
          <div class="time_countdown_pop_top_text">
            <p> 1.考核计时{{examine_time}}分钟，点击确认考核计时开始，倒计时结束系统将自动提交成绩。</p>
            <p> 2.窗口左边显示为计时及成绩信息，左下方为省级区域位置信息(仅供参考)。</p>
            <p> 3.边界地图共两级显示，中间操作界面为市级行政区划边界图，鼠标单击左键进入乡镇级地图，再次单击左键即可退出；右键为确认按键。</p>
            <p> 4.窗口右下方为上一题的位置解析。</p>
          </div>
        </div>

        <div class="time_countdown_pop_bottom">
          <div class="time_countdown_pop_bottom_buttons">
            <div class="time_countdown_pop_bottom_button" @click="exit">取消</div>
            <div class="time_countdown_pop_bottom_button" @click="start_examine">确认({{time.countdown}})</div>
          </div>
        </div>
      </div>
    </div>



<!--    结束弹窗-->
    <div class="end_examine_pop time_countdown_pop" v-if="status.end_examine_pop">
<!--    <div class="end_examine_pop time_countdown_pop" v-if="true">-->
      <div class="end_examine_pop_content">
        <div class="end_examine_pop_content_tip">考核结束</div>
        <div class="end_examine_pop_content_text">{{username}}，您好！<br>
          <p>当前考核结束,您的分数为{{examine_grade}}，{{time.end_examine_pop_time}}s后退出当前页面。</p>
        </div>
        <div class="end_examine_pop_content_buttons">
          <div class="end_examine_pop_content_button" @click="exit">立即退出</div>
        </div>
      </div>
    </div>


<!--    退出按钮确认弹窗-->
    <div class="exit_sure" v-if="exit_sure_status">
      <div class="exit_sure_content">
        <div class="exit_sure_content_tip">注意！</div>
        <div class="exit_sure_content_text">{{username}}，您好！<br>
          <p>当前考核未结束,您的分数为{{examine_grade}}，退出后当前成绩将上传至您的个人成绩记录，是否确认退出？</p>
        </div>
        <div class="exit_sure_content_buttons">
          <div class="exit_sure_content_button" @click="returnToanswer">返回答题</div>
          <div class="exit_sure_content_button" @click="exit">立即退出</div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import ExamineTopBar from "@/components/FunctionModulePage/ExamineModel/ExamineTopBar.vue";
import ExamineMap from "@/components/FunctionModulePage/ExamineModel/ExamineMap.vue";
import yunnanProvinceMap from "@/components/FunctionModulePage/ExamineModel/yunnanProvinceMap.vue";
import county_Map from "@/components/FunctionModulePage/ExamineModel/location_analysis_county_map.vue";
import town_Map from "@/components/FunctionModulePage/ExamineModel/location_analysis_town_map.vue";

import examine_scores from '@/assets/api/examine_scores'

export default {
  name: 'TrainPage',
  components: {
    ExamineTopBar,
    ExamineMap,
    yunnanProvinceMap,
    county_Map,
    town_Map
  },
  data() {
    return {
      //examine_topic: null,   //题目
      examine_topic_num: 1,  //题号顺序
      examine_topic_nums:100,  //题目数量
      examine_answer:null,   //答案
      answer_topic_status:null, //每题的答题正误
      examine_topics_list: [],  //题库
      examine_topics_nav:[],   //题目导航
      examine_answer_questions_list:[],  //答题记录
      examine_grade:0,  //分数
      examine_topic_grade: 0,  //每题多少分
      examine_true_num:0,    //考核正确题目数量
      examine_false_num:0,   //考核错误题目数量
      items: new Array(50).fill(0),
      examine_time: 30, //考核时长
      start_examine_text: '开始考核',
      county_town_data: null,  //县区及乡镇数据
      answer_tip:'是否选择当前区域？',
      time: {
        timer_start: null,  //开始按钮倒计时对象
        countdown: 60,   //开始倒计时

        init_examine_time: 60,   //考核时间
        examine_timer: null, // 考核计时器
        examine_timer_isRunning: false,    //考核计时器状态
        remaining_time: 60, // 剩余考核时间（秒）

        examine_pop_timer_end: null,  //结束弹窗倒计时对象
        end_examine_pop_time: 30,  //结束弹窗倒计时时长
      },
      status: {
        time_countdownisShow: true,    //开始按钮倒计时显示状态
        time_countdown_pop: true,  //进入弹窗
        end_examine_pop: false,   //考核结束弹窗
        examine_status: false,   //考核状态
        examine_countTime_status: false, //考核倒计时状态
        // answer_pop_status: false,  //作答弹窗状态
        countdown_Time_pause_status:false,  //暂停遮罩层
      },
      //考核倒计时
      examine_conutTime: {
        // time:'30',
        hour: '00',
        min: '30',
        sec: '00',
      }


    }
  },
  created() {
    //加载乡镇数据
    this.loadCountyTownData()
  },

  computed:{
    //用户名
    username(){
      // return this.$store.state.response.Name
      let data =  JSON.parse(localStorage.getItem('familiar_with_qujingmap_userinfo'))
      // console.log('用户数据：',data.Name)
      return data.user_name
    },
    user_account(){
      // return this.$store.state.response.Name
      let data =  JSON.parse(localStorage.getItem('familiar_with_qujingmap_userinfo'))
      // console.log('用户数据：',data.Name)
      return data.user_account
    },
    //作答弹窗状态
    answer_pop_status(){
      return this.$store.state.answer_pop
    },
    //退出按钮确认
    exit_sure_status(){
      return this.$store.state.exit_sure_status
    }
  },
  mounted() {
    this.StartPopcountTime()
    //关闭遮罩层
    this.status.countdown_Time_pause_status = false
  },
  watch:{
    '$store.state.exit_sure_status'(newVal){
      if(newVal === true){
        this.stop_examine_conutTime()
      }else{
        this.start_examine_conutTime()
      }
    }
  },
  methods:{
    //将作答得分情况上传至后端服务器
    update_sore_data(){
      if(this.user_account === 0){
        return
      }
      let currentTime = this.getFormattedDateTime();
      //需要上传的数据
      let sore_data = {
        "user_account":this.user_account,
        "user_name":this.username,
        "question_count":this.examine_answer_questions_list.length,     //做题数量
        "user_grade":this.examine_grade,
        "exam_date":currentTime,
        "examine_true_num":this.examine_true_num,  //正确题目数量
        "examine_false_num":this.examine_false_num,  //错误题目数量  
      }
      // console.log('成绩信息：',sore_data)
      //调用API上传数据
      examine_scores.update_examine_person_score_request(sore_data)
    },

    //获取当前系统时间
    getFormattedDateTime(){
      const d = new Date();
      let now_time =  `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2,'0')}-${d.getDate().toString().padStart(2,'0')} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}:${d.getSeconds().toString().padStart(2,'0')}`;
      // console.log('时间：',now_time)
      return now_time
    },



    //动态改变答题记录的颜色
    getStatusClass(status) {
      return {
        'status-correct': status === '正确',
        'status-wrong': status === '错误',
      };
    },
    //开始答题
    next_question(){
      // 开始题目
      //判断是否答完题
      if(this.examine_topic_num < this.examine_topic_nums){
          this.examine_topic_num++
      //答题结束
      }else{
        console.log('答题结束')
        this.end_examine_pop_countTime()
      }
    },
    //确定作答弹窗
    answer_pop_sure(){
      //接收答案--用户作答
      let answer = this.$store.state.answer_text  //点击区域
      let belongTo = this.examine_topics_list[this.examine_topic_num-1].belongTo
      this.examine_answer = this.examine_topics_list[this.examine_topic_num-1].answer  //题目答案
      //判断正误
      if(this.examine_answer === answer){
        // console.log('作答正确,答案：',this.examine_answer,'用户选择：',answer)
        document.getElementById('answer_content_text').style.color = 'greenyellow'
        // document.getElementById('record_strips').style.color = 'greenyellow'
        this.answer_tip = '回答正确'
        this.answer_topic_status ='正确'
        //加分
        this.examine_grade+=this.examine_topic_grade
        this.examine_true_num++   //正确数+1
      }else{
        // console.log('作答错误,答案：',this.examine_answer,'用户选择：',answer)
        document.getElementById('answer_content_text').style.color = 'red'
        // document.getElementById('record_strips').style.color = 'red'
        this.answer_tip = '回答错误'
        this.answer_topic_status ='错误'
        this.examine_false_num++   //错误数+1
      }
      setTimeout(()=>{
        this.$store.commit('setanswer_pop',false)
        //重置提示框
        this.answer_tip = '是否选择当前区域？'
        // 切换下题目
        this.next_question()
        //除第一题其余题加入题目导航
        this.examine_topics_nav.push(this.examine_topics_list[this.examine_topic_num-1].question)

        //答案上传至vuex，进行答案解析地图的渲染
        let answer_map = {
          "county":belongTo,
          "town":this.examine_answer
        }
      // console.log('解析地图渲染测试：',answer_map)
      this.$store.commit('setanswer_map',answer_map)
      },300)

      //加入答题记录
      this.examine_answer_questions_list.unshift({
        "question":this.examine_answer,
        "user_select":answer,
        "belongTo":belongTo,
        "status":this.answer_topic_status,
      })
    },
    //取消作答弹窗
    answer_pop_cancel(){
      // this.answer_pop_status = false
      this.$store.commit('setanswer_pop',false)
    },
    // 加载县区乡镇数据
    async loadCountyTownData() {
      try {
        // 动态导入 JSON 文件（返回 Promise）
        const response = await import('@/assets/json/county_town_data.json');
        this.county_town_data = response.default; //  response（取决于构建工具配置）
        // console.log('县区乡镇数据加载成功：', this.county_town_data);
        // 数据加载完成后，可以调用 toggleTopic
        // this.toggleTopic();
        //生成随机题目
        this.toggleTopic()
      } catch (error) {
        console.error('加载县区乡镇数据失败：', error);
      }
    },

    //生成随机题目
    toggleTopic(){
      // console.log('县区乡镇数据：',this.county_town_data)
      // console.log('县区乡镇长度：',this.county_town_data.length)
      // console.log('县区乡镇0：',this.county_town_data[0])
         // 0-8之间的随机数
      // console.log('随机数：：',county_random)
      // console.log('随机县区数据：',random_county.county_name)
      // console.log('随机乡镇数据：',random_county.towns[town_random])
      this.examine_topic_grade = 100 / this.examine_topic_nums   //计算每题分数
      for(let i=0;i<this.examine_topic_nums;i++){
        // 随机县区数据
        const county_random = Math.floor(Math.random() * this.county_town_data.length)
        const random_county = this.county_town_data[county_random]  //random_county为随机的县区
        const town_random = Math.floor(Math.random()*random_county.towns.length)
        // this.examine_answer = random_county.towns[town_random]
        // let question = `请找到${random_county.towns[town_random]}的行政规划区域（在目标区域点击鼠标左键回答）。`
        const currentAnswer = random_county.towns[town_random];  //随机乡镇 答案
        // 检查是否已经存在相同的答案
        const isDuplicate = this.examine_topics_list.some(
          topic => topic.answer === currentAnswer
        );

        if (!isDuplicate) {
          let question = `请找到${random_county.county_name}${currentAnswer}的行政规划区域！`;
          // console.log('题目：', i, '.', currentAnswer);
          this.examine_topics_list.push({
            "question": question,
            "answer": currentAnswer,
            "belongTo":random_county.county_name,
            "answer_status": false
          }); // 题目加入题库
        } else {
          // console.log('重复题目已跳过：', currentAnswer);
          i--; // 如果重复，重新生成当前题目（注意：避免无限循环）
        }

        /*
        this.examine_topics_list.push({
          "question":question,
          "answer":random_county.towns[town_random],
          "answer_status":false
        }) //题目加入题库
*/

      }
      // console.log('题库：',this.examine_topics_list)
      // for (let i=0;i<this.examine_topics_list;i++){
      //   console.log('题库：',this.examine_topics_list)
      // }
      // return question
      //第一题加入题目导航
      this.examine_topics_nav.push(this.examine_topics_list[0].question)
    },

    //结束弹窗
    end_examine_pop_countTime(){
      this.status.end_examine_pop = true  //开启结束弹窗
      //结束弹窗倒计时
      this.time.examine_pop_timer_end = setInterval(() =>{
          this.time.end_examine_pop_time--
          if(this.time.end_examine_pop_time <= 0){
            clearInterval(this.time.examine_pop_timer_end)  //倒计时结束
            this.exit()  //退出
          }
        },1000)
    },
    //退出
    exit(){
      this.$store.commit('setexit_sure_status',false)
      this.$router.go(-1)
    },

    returnToanswer(){
      this.$store.commit('setexit_sure_status',false)
    },
    //开始考核倒计时
    start_examine_conutTime(){
      // 清除之前的计时器
      if (this.time.examine_timer) {
        clearInterval(this.time.examine_timer);
        this.time.examine_timer = null
        this.time.examine_timer_isRunning = false
      }
      // 解析当前时间
      let totalSeconds =
        parseInt(this.examine_conutTime.hour) * 3600 +
        parseInt(this.examine_conutTime.min) * 60 +
        parseInt(this.examine_conutTime.sec);

      this.time.examine_timer_isRunning = true
      this.status.examine_status = true
      this.time.examine_timer = setInterval(() => {
        if (totalSeconds <= 0) {
          clearInterval(this.time.examine_timer);
          // 考核时间结束，自动提交
          this.end_examine_conutTime()
          return;
        }

        totalSeconds--;

        // 更新显示时间
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        this.examine_conutTime = {
          hour: hours.toString().padStart(2, '0'),
          min: minutes.toString().padStart(2, '0'),
          sec: seconds.toString().padStart(2, '0')
        };
      }, 1000);
        //修改定时器颜色
        const examine_time_count_button = document.getElementById('examine_time_text_color')
        examine_time_count_button.style.color = 'greenyellow'
        this.status.examine_status = true
        this.$store.commit('setexamine_status',this.status.examine_status)
        //关闭遮罩层
        this.status.countdown_Time_pause_status = false
    },
    //停止考核定时器
    stop_examine_conutTime(){
      if(this.time.examine_timer){
        clearInterval(this.time.examine_timer);
        this.time.examine_timer = null;
        this.time.examine_timer_isRunning = false
        //修改定时器颜色
        const examine_time_count_button = document.getElementById('examine_time_text_color')
        examine_time_count_button.style.color = 'red'
        this.status.examine_status = false
        this.$store.commit('setexamine_status',this.status.examine_status)
        //开启遮罩层
        this.status.countdown_Time_pause_status = true
      }
    },
    //考核计时器归零
    end_examine_conutTime(){
      this.status.examine_status = false  //考核状态
      this.end_examine_pop_countTime()    //开启结束弹窗
      this.$store.commit('setexamine_status',this.status.examine_status)
    },
    //考核定时器状态切换  继续/暂停
    toggle_examine_Timer(){
      if(this.time.examine_timer){
        //暂停考核定时器
        this.stop_examine_conutTime()
      }else{
        //开始考核定时器
        this.start_examine_conutTime()
      }
    },

    //开始考核
    start_examine(){
      clearInterval(this.time.timer_start)
      //关闭进入弹窗
      this.status.time_countdown_pop = false
      //考核开始
      this.status.examine_status = !this.status.examine_status
      //提交考核状态至vuex
      this.$store.commit('setexamine_status',this.status.examine_status)
      //根据状态切换考核倒计时开始/停止
      this.toggle_examine_Timer()
      //开始题目
      // this.start_answer_question()
      if(this.status.examine_status){
        this.start_examine_text = '考核中(点击暂停)…'
        this.status.time_countdownisShow = false
        // this.status.examine_status = true
      }else{
        this.start_examine_text = '暂停中(点击开始)…'
        // this.status.examine_status = false
        this.status.time_countdownisShow = false
      }
    },

    //开始计时器
    StartPopcountTime(){
      this.time.timer_start = setInterval(() => {
        if(this.time.countdown > 0){
          this.time.countdown--;
        }else{
          clearInterval(this.time.timer_start)
          // console.log('倒计时结束')
          //弹窗关闭
          this.status.time_countdown_pop = false
          if(this.status.time_countdown_pop === false){
            //考核开始
            this.status.examine_status = true
            //切换考核定时器
            this.toggle_examine_Timer()
            //提交考核状态至vuex
            this.$store.commit('setexamine_status',this.status.examine_status)
            this.status.time_countdownisShow = false
          }
        }
      },1000)
    }

  },
  beforeDestroy() {
    clearInterval(this.time.timer_start)
    clearInterval(this.time.examine_timer)
    //关闭遮罩层
    this.status.countdown_Time_pause_status = false
    this.update_sore_data() //结束时上传成绩数据
  }

}
</script>

<!--<style scoped>-->
<!--   @import '@/assets/ecss/ExaminePageCSS.css';-->
<!--</style>-->

<style scoped>
  .train{
    width: 100vw;
    height: 100vh;
    color: white;
    //background-color: #b6b696;
  }
  /*
  .content{
    width: 100%;
    height: 100vh;
    //background-color: #bbbbaa;
  }
*/
  .topbar{
    width: 100%;
    height: 5vh;
  }

  .content{
    width: 100vw;
    height: 95vh;
    background-color: #babbbb;
    //position: absolute;
    color: white;
    //left: calc(50% - 35vw);
  }
  .left_introduce{
    width: 25vw;
    height: 95vh;
    background-color: #babbbb;
    float: left;
    box-sizing: border-box;
  }

  .city_introduction{
    width: 100%;
    height: 20vh;
    position: relative;
    //top: 20vh;
    box-sizing: border-box;
    padding: 1vh;
    color: white;
    //background: yellow;
    font-size: 0.4vw;
    border-bottom:1px solid black;
  }
  p{
    text-indent: 2em;
    //color: #5d25bf;
    color: white;
  }

  .left_button{
    width: 100%;
    height: 4vh;
    //background-color: red;
    position: relative;
    top: 21vh;
    //float: left;
  }
  .button{
    width: 15%;
    height: 100%;
    background-color: #707170;
    position: relative;
    //top: 2vh;
    left: calc(50% - 10%);
    //display: flex;
    //justify-content: space-between;
    border-radius: 10px;
    text-align: center;
    line-height: 4vh;
  }
  .button{
    width: 5vw;
    height: 100%;
    background-color: #777575;
    border-radius:10px
  }
  .button:hover{
    border: lime 1px solid;
    color: lime;
    cursor:pointer;
  }


  .game_body{
    width: 50vw;
    height: 94vh;
    /*position: relative;*/
    background-color: #faf6f6;
    float: left;
    margin-top: 0.5vh;
    box-sizing: border-box;
    border-radius: 10px;
    /*border:1px dashed black;*/
  }
  .right_introduce{
    width: 25vw;
    height: 95vh;
    /* background-color:#676969; */
    float: right;
    font-size: 0.6vw;
    box-sizing: border-box;
  }
  .county_introduction{
    width: 100%;
    height: 100%;
    /*background-color: aqua;*/
    //position: relative;
    //top: 20vh;
    box-sizing: border-box;
    overflow: hidden;
    //padding: 2vh;
    //text-align: center;
    //line-height: 50vh;
  }


  .examine_right_top{
    width: 100%;
    height: 25%;
    color: white;
    //border-top:solid 1px black;box-sizing: border-box;
    background-color: #14d036;
  }
  .examine_right_top_time{
    width: 100%;
    height: 25%;
    background-color:#babbbb;box-sizing: border-box;
  }
  .examine_right_top_time_content{
    width: 100%;
    height: 100%;
    /*background-color: #c1945f;*/
    //position: relative;
    //left: calc(50% - 10%);
  }

  .examine_right_top_time_text{
    width: 10%;
    height: 100%;
    //background-color: red;
    text-align: center;
    line-height: 6vh;
    float: left;
  }
  .examine_conutTime{
    width: 10%;
    height: 100%;
    color: white;
    //background-color: yellow;
    float: left;
    text-align: center;
    line-height: 6vh;
    //font-size:0.5vw;
  }
/*
  .personal_informations{
    width: 100%;
    height: 75%;
    //background-color: #c1945f;
    box-sizing: border-box;
    padding: 10px;
 */

  .information{
    width: 100%;
    height: 20%;
    //background-color: #5d25bf;
    margin-top: 0.5vh;
    line-height: 3vh;
  }

  .record{
    width: 100%;
    height: 30%;
    /*background-color: #14ee14;*/
    /*border-top: solid black 1px;*/
    /*color: red;*/
    font-size: 0.8vw;

  }
  .record_name{
    font-size: 1vw;
    width: 100%;
    height: 10%;
    box-sizing: border-box;
    /*background-color: #267a1f;*/
    text-align: center;
    /*line-height: 3vh;*/
    font-weight: bolder;
    //border-bottom:black 1px dashed;
    color: black;
  }

  .record_content{
    width: 96%;
    height: 90%;
    background-color: #151414;
    box-shadow: 1px 1px 1px 1px black;
    position: relative;
    left: calc(50% - 48%);
    border: 1px black dashed;
    border-radius: 10PX;
    box-sizing: border-box;
    /*padding: 10px;*/
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .record_content::-webkit-scrollbar{
    display: none;
  }

  .record_strips{
    width: 100%;
    height: 4.5vh;
    /*background-color: #dedddd;*/
    margin-top: 0.5vh;
    overflow: hidden;
    //text-align: center;
    /*line-height: 3vh;*/
    color:white;
    border-radius: 5px;
    box-sizing: border-box;
    padding-left: 0.5vw;
    font-size: 0.7vw;
    overflow-wrap: normal;
    /*font-weight: bolder;*/
  }

    /*答题记录动态颜色*/
    .status-correct {
      color: #4ace3a; /* 绿色（正确） */
    }
    .status-wrong {
      color: #f32c1c; /* 红色（错误） */
    }

  /*  显示正确的地图*/
  .true_map{
    width: 100%;
    height: 70%;
    /*background-color: yellow;*/
  }
  .true_map_title{
    width: 100%;
    height: 5%;
    /*background-color: chartreuse;*/
    text-align: center;
    line-height: 3vh;
    font-size: 1vw;
    font-weight: bolder;
    color: black;
  }
  .true_map_content{
    width: 100%;
    height: 95%;
    /*background-color: #3b7d0a;*/
  }
  .true_map_county_map{
    width: 96%;
    height: 30vh;
    background-color: #3b3b3b;
    /*float: left;*/
    position: relative;
    left: calc(50% - 48%);
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px dashed black;
    box-shadow: 1px 1px 1px 1px black;
  }
  .true_map_town_map{
    width: 96%;
    height: 30vh;
    background-color: #3b3b3b;
    box-sizing: border-box;
    border: 1px dashed black;
    border-radius: 10px;
    position: relative;
    top: 1vh;
    left: calc(50% - 48%);
    box-shadow: 1px 1px 1px 1px black;
  }





  .topic_nav{
    width: 100%;
    height: 20%;
    background-color: #c1945f;
    text-align: center;
    line-height: 4.5vh;
  }
  .topic_nav_content{
    width: 90%;
    height: 75%;
    //background-color: lime;
    position: relative;
    left: calc(50% - 45%);
    border: 1px black dashed;
    border-radius: 10PX;
    box-sizing: border-box;
    padding: 10px;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
   }
  .topic_nav_content::-webkit-scrollbar{
    display: none;
  }

  .topic_nav_strips{
    width: 100%;
    height: 5vh;
    /*background-color: lime;*/
    margin-top: 0.5vh;
     color: white;
  }


  .personal_informations{
    width: 95%;
    height: 20%;
    position: relative;
    left: calc(50% - 47.5%);
    background-color: #4e4e4e;
    overflow: hidden;
    margin-top: 0.5vh;
    box-sizing: border-box;
    border-radius: 10px;
    border: dashed black 1px;
    box-shadow: 1px 1px 1px 1px #151414;
  }

  .personal_informations_left{
    width: 50%;
    height: 100%;
    float: left;
    /*background-color: #0ca0e0;*/
    box-sizing: border-box;
    padding-left: 10px;
    word-break: break-all;
  }
  .personal_informations_right{
    width: 50%;
    height: 100%;
    //float: left;
    margin-left: 50%;
    /*background-color: #0ca0e0;*/
  }
  .examine_name{
    width: 100%;
    height: 24%;
    /*background-color: #267a1f;*/
    line-height: 4vh;
    margin-top: 0.1vh;
    font-size: 0.7vw;
    /*font-size: clamp(7px,1.2vw,15px);*/
    //border-radius: 10px;
    word-break: break-all;
    box-sizing: border-box;
    //border-bottom: 1px black dashed;
  }
  .examine_map_name{
    width: 200%;
  }
  .examine_name p{
    font-size: clamp(7px,1.2vw,12px);
  }

  .examine_time{
    width: 50%;
    height: 100%;
    float: left;
    //background-color: lime;
  }

  .examine_time_tip{
    width: 100%;
    height: 50%;
    //background-color: #5d25bf;
    text-align: center;
    line-height: 15vh;
    font-size: 1vw;
  }
  .examine_time_count{
    width: 90%;
    height: 30%;
    position: relative;
    left: calc(50% - 45%);
    /*background-color: #c1945f;*/
    font-size: clamp(7px,1vw,26px);
    text-align: center;
    line-height: 5vh;
    color: greenyellow;
    font-weight: bolder;
  }
  .button_tip{
    width: 100%;
    height: 20%;
    text-align: center;
    line-height: 3vh;
    font-size: 0.8vw;
    //background-color: red;
    display: none;
    color: yellow;
  }
  .examine_time_count_button:hover{
    cursor:pointer;
    border: 1px dashed yellow;
    border-radius: 10px;
  }
  .examine_time_count_button:hover + .button_tip{
    display: block;
  }

  .examine_grade{
    width: 50%;
    height: 100%;
    float: right;
   /*background-color: red;*/
  }

  .mall_map{
    width: 95%;
    height: 76%;
    background-color: #4e4e4e;
    position: relative;
    left: calc(50% - 47.5%);
    top: 1vh;
    border-radius: 10px;
    border: dashed black 1px;
    overflow: hidden;
    box-shadow: 1px 1px 1px 1px black;
  }




  .time_countdown_pop{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    /*color: black;*/
  }
  .time_countdown_pop_content{
    width: 30vw;
    height: 25vh;
    /*color: black;*/
    background-color: #0f100f;
    box-shadow: 2px 2px 2px 2px #a89d82;
    position: relative;
    top: 25vh;
    left: calc(50% - 15vw);
    border-radius: 15px;
    overflow: hidden;
  }
  .time_countdown_pop_top{
    width: 100%;
    height: 80%;
    /*background-color: greenyellow;*/
  }
  .time_countdown_pop_top_tip{
    width: 100%;
    height: 30%;
    font-weight: bolder;
    font-size: clamp(7px,1vw,23px);
    /*background-color: #267a1f;*/
    text-align: center;
    box-sizing: border-box;
    padding-top: 1.4vh;
    color: #08d713;
    border-bottom:1px solid black;
  }
  .time_countdown_pop_top_text{
    width: 100%;
    height: 70%;
    /*color: black;*/
    /*font-size: clamp(7px,0.54vw,25px);*/
    font-size: 0.77vw;
    /*background-color: #c1945f;*/
    box-sizing: border-box;
    padding: 5px;
    /*font-size: clamp(7px,0.45vw,13px);*/
    /*border-bottom: 1px dashed black;*/
  }
  .time_countdown_pop_bottom{
    width: 100%;
    height: 20%;
    /*background-color: #267a1f;*/
  }
  .time_countdown_pop_bottom_buttons{
    width: 70%;
    height: 90%;
    /*background-color: yellow;*/
    position: relative;
    left: calc(50% - 35%);
    display: flex;
    justify-content: space-between;
  }
  .time_countdown_pop_bottom_button{
    width: 40%;
    height: 90%;
    margin-top: 0.4vh ;
    background-color: #5a5958;
    text-align: center;
    line-height: 4.3vh;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 10px;
  }
  .time_countdown_pop_bottom_button:hover{
    background-color: #abd513;
    cursor:pointer;
    /*box-shadow: 1px 1px 1px 1px black;*/
    /*box-sizing: border-box;*/
    position: relative;
    top: 2px;
    left: 2px;
    box-shadow: 1px 1px 1px 1px #0ae80a;
    color: black;
  }
  .time_countdown_pop_bottom_button:active{
    background-color: #8ba17e;
  }



  .end_examine_pop_content{
    width: 20vw;
    height: 17vh;
    background-color: #709dbf;
    position: relative;
    top: 30vh;
    left: calc(50% - 7.5vw);
    border-radius: 15px;
    overflow: hidden;
    /*font-size: clamp(7px,0.45vw,16px);*/
    font-size: 0.6vw;
    box-shadow: 2px 2px 2px 2px rgb(83, 92, 70);
  }
  .end_examine_pop_content_tip{
    width: 100%;
    height: 20%;
    /*background-color: #c1945f;*/
    text-align: center;
    line-height: 3vh;
    font-size: 0.9vw;
    border-bottom: 1px solid black;
  }
  .end_examine_pop_content_text{
    width: 100%;
    height: 55%;
    /*background-color: #529e2b;*/
    box-sizing: border-box;
    padding: 10px;
    font-size: clamp(7px,0.45vw,16px);
    font-size: 0.8vw;
    border-bottom: 1px dashed black;
  }
  .end_examine_pop_content_buttons{
    width: 100%;
    height: 25%;
    /*background-color: #722687;*/
  }
  .end_examine_pop_content_button{
    width: 30%;
    height: 80%;
    background-color: #575654;
    position: relative;
    top: 0.4vh;
    left: calc(50% - 15%);
    border-radius: 10px;
    text-align: center;
    line-height: 3.2vh;
    font-size: 0.8vw;
    box-sizing: border-box;
    border: solid black 1px ;
  }
  .end_examine_pop_content_button:hover{
    background-color: #1ce236;
    cursor:pointer;
    margin-top: 2px;
    margin-left: 2px;
    /*box-shadow: 1px 1px 1px 1px black;*/
    /*box-sizing: border-box;*/
    /*position: relative;*/
    /*top: 2px;*/
    /*left: 2px;*/
  }
  .end_examine_pop_content_button:active{
    background-color: #5ef308;
  }


  .topic{
    width: 70%;
    height: 9vh;
    /*background-color: red;*/
    float: left;
    position: relative;
    top: 0;
    left: calc(50% - 35%);
    text-align: center;
    line-height: 9vh;
    color: #f50808;
    font-size:1vw;
    font-weight: bolder;
  }

  .answer_pop{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    /*overflow: hidden;*/
    /*float: left;*/
    position: relative;
    top: -94vh;
    border-radius: 10px;
  }
  .answer_content{
    width: 10vw;
    height: 10vh;
    background-color: white;
    border-radius: 10px;
    position: relative;
    top: 30vh;
    left: calc(50% - 5vw);
    overflow: hidden;
    color: black;
    box-shadow: 1px 1px 1px 1px black;
  }
  .answer_content_text{
    width: 100%;
    height: 50%;
    /*background-color: yellow;*/
    text-align: center;
    line-height: 5vh;
    overflow: hidden;
  }
  .answer_content_buttons{
    width: 100%;
    height: 50%;
    /*background-color: green;*/
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
.button_cancel,
.button_sure{
  width: 40%;
  height: 70%;
  background-color: greenyellow;
  text-align: center;
  line-height: 3.5vh;
  border-radius: 10px;
  box-shadow: 1px 1px 1px 1px black;
}
.button_cancel:hover,
.button_sure:hover{
   cursor: pointer;
  background-color: #abe256;
  box-sizing: border-box;
  border: 1px solid #11d781;
}
.button_cancel:active,
.button_sure:active{
  color: white;
  background-color: #10f363;
  border: 2px solid #abe256;
}


.game_body .tips{
  width: 50vw;
  height: 3vh;
  /*background-color: #070707;*/
  position: absolute;
  top: 96.5vh;
  color: #460be7;
  font-size: 0.8vw;
  box-sizing: border-box;
  padding-left: 10px;
  font-weight: bolder;
}

.exit_sure_content_tip{
    width: 100%;
    height: 20%;
    /*background-color: #c1945f;*/
    text-align: center;
    line-height: 3vh;
    font-size: 0.9vw;
    border-bottom: 1px solid black;
}


.countdown_Time_pause{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  /*overflow: hidden;*/
  /*float: left;*/
  position: relative;
  top: -94vh;
  border-radius: 10px;
}



.exit_sure{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
}

.exit_sure_content{
    width: 20vw;
    height: 17vh;
    background-color: #709dbf;
    position: relative;
    top: 30vh;
    left: calc(50% - 7.5vw);
    border-radius: 15px;
    overflow: hidden;
    /*font-size: clamp(7px,0.45vw,16px);*/
    font-size: 0.6vw;
    box-shadow: 2px 2px 2px 2px rgb(58, 61, 53);
}
.exit_sure_content_tip{
    width: 100%;
    height: 20%;
    /*background-color: #c1945f;*/
    text-align: center;
    line-height: 3vh;
    font-size: 0.9vw;
    border-bottom: 1px solid black;
}

.exit_sure_content_text{
    width: 100%;
    height: 55%;
    /*background-color: #529e2b;*/
    box-sizing: border-box;
    padding: 10px;
    font-size: clamp(7px,0.45vw,16px);
    font-size: 0.8vw;
    /*border-bottom: 1px dashed black;*/
}
.exit_sure_content_buttons{
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: space-around;
    /*background-color: #722687;*/
  }
  .exit_sure_content_button{
    width: 30%;
    height: 80%;
    background-color: #575654;
    border-radius: 10px;
    text-align: center;
    line-height: 3.2vh;
    font-size: 0.8vw;
    box-sizing: border-box;
    border: solid black 1px ;
  }
  .exit_sure_content_button:hover{
    background-color: #1ce236;
    cursor:pointer;
    /*margin-top: 2px;*/
    /*margin-left: 2px;*/
    /*box-shadow: 1px 1px 1px 1px black;*/
    /*box-sizing: border-box;*/
    /*position: relative;*/
    /*top: 2px;*/
    /*left: 2px;*/
  }
  .exit_sure_content_button:active{
    background-color: #5ef308;
  }


</style>